<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<html>
<head>
<meta charset="UTF-8">
<title>黔彩便利加盟申请表</title>
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet"
	href="${contextPath}/static/statistics/layui/css/layui.css" />
</head>
<style>
	body{
		margin: 0px;
		padding: 0px;
	}
	span {
		margin: 5px 7px;
	}
      font{
      	color: red;
      	font-size: 15px;
      	vertical-align: middle;
      }

      input,select,option,textarea{
		outline:none;
	  }
	#subButton{
		width: 90%;
		height: 47px;
		border-radius: 4px;
		margin-bottom: 28px;
		background-color: #408170;
		color:white;
		margin-top: 10px;
		border: none;
		outline: none;
	}
	.span_title{
		color: #1D1D1D;
		font-size: 16px;
		margin-left: 22px;
		margin-top:30px;
	}

	.div_content{
		margin-top: 10px;
		margin-bottom: 15px;
		text-align: center;
	}
	.input_content{
		border: 1px solid #DCE4EB;
		color:#B3B3B3;
		width:90%;
       	height: 33px;
       	border-radius: 4px;
       	font-size: 16px;
       	padding-left:5px;
	}
	input::-webkit-input-placeholder {
         /* placeholder颜色  */
         color: #B3B3B3;
    }
	/*弹窗CSS*/
	#warning{
	width: 100%;
	height: 100%;
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,0.5);
	}
	#layer_content{
		background-color: white;
		width:200px;
		height:100px;
		margin:0px auto;
		position:absolute;
		left:50%;
		top:50%;
		margin-left: -100px;
		margin-top: -50px;
		text-align: center;
		background-color: #FFFFFF;
		border-radius:5px;
	}
</style>
			
<body>
	<div>
		<div>
			<div>
				<form id="baseForm">
					<div id="mention" style="text-align:center;margin-top:30px;color:#408170;font-size: 16px;font-weight: normal;">
						<p>请输入您的电话号码查询是否有申请加盟的记录</p>
					</div>
					<div style="margin-top:30px;">
						<div class="div_content" id="phoneNum">
							<input type="text" maxlength='11' id="phoneNumber" name="phoneNumber" class="input_content"  placeholder="请输入电话号码">
						</div>
						<div style="display:none;" id="joinIfo">
							<div style="text-align:center;"><span style="color:red;">您已经申请过了！！</span></div>
						  	<span class="span_title">姓名</span>
							<div class="div_content">
								<input type="text" readonly class="input_content" id="BASE_NAME" ><br/>
							</div>
							<span class="span_title">是否有自己的店铺</span>
							<div class="div_content">
								<input type="text" readonly class="input_content" id="BASE_OWN_SHOP" ><br/>
							</div>
							<span class="span_title">申请时间</span>
							<div class="div_content">
								<input type="text" readonly class="input_content" id="APPLAY_TIME" ><br/>
							</div>
						</div>
						<div class="div_content">
							<button id="subButton" onclick="queryJoinInfo()" type="button">查询</button>						
						</div>
					</div>
				</form>

			</div>
		</div>
	</div>
	<!-- 弹窗内容开始 -->
 	 <div id="warning">
		<div id="layer_content">
			<div style="margin:0 auto;color:#1D1D1D;
				 font-size:13px;margin-top:20px;text-align:justify;line-height:20px;">
				您还没有申请,现在是否需要申请加盟？
			</div>
			<div style="text-align: center;margin-top:10px;">
				<a href="#" id="bt1" style="font-size:13px;margin-right:30px;">考虑一下</a>&nbsp;&nbsp;&nbsp;
				<a href="#" id="bt2" style="color:blue;font-size:13px;">申请加盟</a>
			</div>
		</div>
	</div>
	<!-- 弹窗内容结束 -->
	<script src="${contextPath}/static/statistics/js/jquery.js"></script>
	<script src="${contextPath}/static/statistics/layui/layui.js"></script>
	<script src="${contextPath}/static/statistics/layui/layui.all.js"></script>
	<script src="${contextPath}/static/validform/joinApplayValidForm.js"></script>

	<!-- 查询加盟信息js -->
	<script type="text/javascript">
	
		/* 查询手机号码是否有申请加盟信息  */
		function queryJoinInfo(){
			
		/* 验证手机号码  */
		var phoneNumber = $("#phoneNumber").val();
		console.log(phoneNumber);
			if(phoneNumber == "" || phoneNumber == null){
				document.getElementById("phoneNumber").value = '手机号不能为空';
				 $("#phoneNumber").css('color','red');
				 $("#phoneNumber").css('font-size','13px');
				$("html,body").animate({scrollTop:$("#phoneNumber").offset().top},10)
				$("#phoneNumber").on('click',function(){
					document.getElementById("phoneNumber").value = '';
					$("#phoneNumber").css('color','#434343');
					 $("#phoneNumber").css('font-size','16px');
				});
				return;
			}else{
				var flag = NumRegCheck(phoneNumber);
				if(flag == false){
					document.getElementById("phoneNumber").value = '手机格式不正确';
					 $("#phoneNumber").css('color','red');
					 $("#phoneNumber").css('font-size','13px');
					$("html,body").animate({scrollTop:$("#phoneNumber").offset().top},10)
					$("#phoneNumber").on('click',function(){
						document.getElementById("phoneNumber").value = '';
						$("#phoneNumber").css('color','#434343');
						 $("#phoneNumber").css('font-size','16px');
					});
					return;
				}
			}
			
			var phNum = $("#phoneNumber").val();
			var params = {
				page:1,
				rows:10,
				phoneNumber:phNum
			}
			$.ajax({
		        type: 'post',
		        url: '${contextPath}/ktJoin/getApplayInfo',
		        data:params,   
		        dataType: 'json',
		        success: function (data) {
		        	var res = data.recordList;
		        	var gg = JSON.stringify(res);
		        	 var obj = eval('(' + gg + ')');
		        	console.log(obj);
		        	 var val = obj[0];
		        	console.log(val);
		        	if(val != null && val != ""){
		        		$("#mention").hide();
		        		$("#phoneNum").hide();
		        		$("#joinIfo").show(); 
		        		$("#subButton").attr('disabled',true);
		        		$("#subButton").css('color','gray');
		        		$("#BASE_NAME").val(val.BASE_NAME);
		        		var ownShop = val.BASE_OWN_SHOP;
		        		if(ownShop == '0'){
		        			ownShop = '没有';
		        			$("#BASE_OWN_SHOP").val(ownShop);
		        		}else{
		        			ownShop = '有';
		        			$("#BASE_OWN_SHOP").val(ownShop);
		        		}
		        		var applayTime = val.APPLAY_TIME;
		        		if(applayTime !="" && applayTime != null){
		        			$("#APPLAY_TIME").val(jsonTimeStamp(applayTime));
		        		}else{
		        			$("#APPLAY_TIME").val('');
		        		}
		        	}else{
		        		var warning = document.getElementById('warning');
		        		var bt1 = document.getElementById('bt1');
		        		var bt2 = document.getElementById('bt2');
		        		
		        		warning.style.display = "block";
		        		bt1.onclick = function turn(){
		        			warning.style.display = "none";
		        		}
		        		bt2.onclick = function turn(){
		        			window.location.href='joinApplay';  
		        			warning.style.display = "none";
		        		}
		        	}
		        },
		        error: function (result) {
		        	layer.msg(result.message);
		        	return;
		        }
		    });
		};
		//时间格式化
		function jsonTimeStamp(milliseconds) {
		    if (milliseconds != "" && milliseconds != null && milliseconds != "null") {
		        var datetime = new Date();
		        datetime.setTime(milliseconds);
		        var year = datetime.getFullYear();
		        var month = datetime.getMonth() + 1 < 10 ? "0"
		                + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
		        var date = datetime.getDate() < 10 ? "0" + datetime.getDate()
		                : datetime.getDate();
		        var hour = datetime.getHours() < 10 ? "0" + datetime.getHours()
		                : datetime.getHours();
		        var minute = datetime.getMinutes() < 10 ? "0"
		                + datetime.getMinutes() : datetime.getMinutes();
		        var second = datetime.getSeconds() < 10 ? "0"
		                + datetime.getSeconds() : datetime.getSeconds();
		        return year + "-" + month + "-" + date + " " + hour + ":" + minute
		                + ":" + second;
		    } else {
		        return "";
		    }
		}
	</script>
</body>
</html>